<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseLayout from './components/layout/BaseLayout.vue';

// 使用i18n
const { t } = useI18n();

// 按钮点击事件处理方法
const handleBooking = () => {
  // 这里可以添加预订场地的逻辑
  alert('即将跳转到场地预订页面');
  console.log('用户点击了立即预订场地按钮');
};

const handleLearnMore = () => {
  // 这里可以添加了解更多服务的逻辑
  alert('即将展示更多服务信息');
  console.log('用户点击了了解更多服务按钮');
};

// 课程tab切换相关
const activeTab = ref('all');

const handleTabClick = (tabId: string) => {
  activeTab.value = tabId;
  console.log(`用户切换到${tabId}课程`);
};

// 六个分类的教练课程数据
interface Coach {
  name: string;
  title: string;
  image: string;
  rating: number;
}

interface Course {
  id: number;
  sport: string;
  coach: Coach;
  name: string;
  description: string;
  tags: string[];
  price: number;
}

interface CourseData {
  [key: string]: Course[];
}

const courseData: CourseData = {
  all: [
    {
      id: 1,
      sport: 'basketball',
      coach: {
        name: '李教练',
        title: '篮球高级教练',
        image: '/coach1.png',
        rating: 4.9
      },
      name: '篮球进阶技巧课程',
      description: '专注于运球、投篮和防守等高级技巧训练，适合有一定基础的篮球爱好者提升技术水平。',
      tags: ['进阶技巧', '4-6人', '90分钟/课时'],
      price: 198
    },
    {
      id: 2,
      sport: 'badminton',
      coach: {
        name: '王教练',
        title: '羽毛球国家一级教练',
        image: '/coach2.png',
        rating: 4.8
      },
      name: '羽毛球基础训练营',
      description: '从零开始学习羽毛球的正确握拍、发球和步伐，适合初学者快速掌握基础知识。',
      tags: ['基础训练', '2-3人', '60分钟/课时'],
      price: 158
    },
    {
      id: 3,
      sport: 'tennis',
      coach: {
        name: '张教练',
        title: '网球前职业选手',
        image: '/coach3.png',
        rating: 5.0
      },
      name: '网球比赛战术课程',
      description: '学习网球比赛中的战术布局、心理调节和临场应变能力，提升比赛胜率。',
      tags: ['战术训练', '1对1', '120分钟/课时'],
      price: 298
    }
  ],
  basketball: [
    {
      id: 4,
      sport: 'basketball',
      coach: {
        name: '李教练',
        title: '篮球高级教练',
        image: '/coach1.png',
        rating: 4.9
      },
      name: '篮球进阶技巧课程',
      description: '专注于运球、投篮和防守等高级技巧训练，适合有一定基础的篮球爱好者提升技术水平。',
      tags: ['进阶技巧', '4-6人', '90分钟/课时'],
      price: 198
    },
    {
      id: 5,
      sport: 'basketball',
      coach: {
        name: '陈教练',
        title: '篮球体能训练师',
        image: '/coach4.png',
        rating: 4.7
      },
      name: '篮球爆发力训练',
      description: '增强下肢力量、提高弹跳能力和快速反应速度，全面提升篮球运动表现。',
      tags: ['体能训练', '3-5人', '60分钟/课时'],
      price: 168
    },
    {
      id: 6,
      sport: 'basketball',
      coach: {
        name: '赵教练',
        title: '青少年篮球教练',
        image: '/coach5.png',
        rating: 4.6
      },
      name: '青少年篮球启蒙班',
      description: '通过趣味教学法培养孩子对篮球的兴趣，同时教授基本技术和团队合作精神。',
      tags: ['启蒙教育', '6-10人', '60分钟/课时'],
      price: 128
    }
  ],
  badminton: [
    {
      id: 7,
      sport: 'badminton',
      coach: {
        name: '王教练',
        title: '羽毛球国家一级教练',
        image: '/coach2.png',
        rating: 4.8
      },
      name: '羽毛球基础训练营',
      description: '从零开始学习羽毛球的正确握拍、发球和步伐，适合初学者快速掌握基础知识。',
      tags: ['基础训练', '2-3人', '60分钟/课时'],
      price: 158
    },
    {
      id: 8,
      sport: 'badminton',
      coach: {
        name: '刘教练',
        title: '羽毛球技巧教练',
        image: '/coach6.png',
        rating: 4.7
      },
      name: '羽毛球杀球技术提升',
      description: '深入学习各种杀球技巧，包括正手杀球、反手杀球和头顶杀球，提升攻击力。',
      tags: ['技巧训练', '1对1', '90分钟/课时'],
      price: 228
    },
    {
      id: 9,
      sport: 'badminton',
      coach: {
        name: '周教练',
        title: '羽毛球双打教练',
        image: '/coach7.png',
        rating: 4.8
      },
      name: '羽毛球双打战术',
      description: '学习双打配合技巧、站位和轮转，提高团队协作能力和比赛策略。',
      tags: ['双打训练', '2-4人', '90分钟/课时'],
      price: 218
    }
  ],
  tennis: [
    {
      id: 10,
      sport: 'tennis',
      coach: {
        name: '张教练',
        title: '网球前职业选手',
        image: '/coach3.png',
        rating: 5.0
      },
      name: '网球比赛战术课程',
      description: '学习网球比赛中的战术布局、心理调节和临场应变能力，提升比赛胜率。',
      tags: ['战术训练', '1对1', '120分钟/课时'],
      price: 298
    },
    {
      id: 11,
      sport: 'tennis',
      coach: {
        name: '孙教练',
        title: '网球发球专家',
        image: '/coach8.png',
        rating: 4.9
      },
      name: '网球发球技巧精修',
      description: '专注于提升发球速度、旋转和准确性，掌握各种发球技术的实战应用。',
      tags: ['发球训练', '1对1', '90分钟/课时'],
      price: 268
    },
    {
      id: 12,
      sport: 'tennis',
      coach: {
        name: '吴教练',
        title: '网球步法教练',
        image: '/coach9.png',
        rating: 4.7
      },
      name: '网球移动步法训练',
      description: '学习高效的场上移动技巧和合理的步法组合，提高击球稳定性和覆盖范围。',
      tags: ['步法训练', '2-3人', '60分钟/课时'],
      price: 188
    }
  ],
  billiards: [
    {
      id: 13,
      sport: 'billiards',
      coach: {
        name: '郑教练',
        title: '台球特级教练',
        image: '/coach10.png',
        rating: 4.9
      },
      name: '台球基础技巧课程',
      description: '学习正确的握杆、站姿和瞄准方法，掌握基本击球技巧和走位思路。',
      tags: ['基础训练', '1对1', '60分钟/课时'],
      price: 188
    },
    {
      id: 14,
      sport: 'billiards',
      coach: {
        name: '钱教练',
        title: '台球走位大师',
        image: '/coach11.png',
        rating: 4.8
      },
      name: '台球精准走位训练',
      description: '深入学习各种杆法和走位技术，提高连续击球能力和战术意识。',
      tags: ['走位训练', '1对1', '90分钟/课时'],
      price: 238
    },
    {
      id: 15,
      sport: 'billiards',
      coach: {
        name: '冯教练',
        title: '台球比赛教练',
        image: '/coach12.png',
        rating: 4.7
      },
      name: '台球比赛策略',
      description: '学习比赛中的心理调节、战术布局和应对不同对手的策略。',
      tags: ['比赛训练', '2-3人', '120分钟/课时'],
      price: 258
    }
  ],
  football: [
    {
      id: 16,
      sport: 'football',
      coach: {
        name: '马教练',
        title: '足球体能教练',
        image: '/coach13.png',
        rating: 4.8
      },
      name: '足球体能专项训练',
      description: '提升足球专项体能，包括耐力、爆发力、速度和协调性训练。',
      tags: ['体能训练', '4-6人', '90分钟/课时'],
      price: 178
    },
    {
      id: 17,
      sport: 'football',
      coach: {
        name: '牛教练',
        title: '足球技术教练',
        image: '/coach14.png',
        rating: 4.9
      },
      name: '足球控球技巧提升',
      description: '学习各种控球、传球和射门技术，提高球感和技术精度。',
      tags: ['技术训练', '3-5人', '90分钟/课时'],
      price: 198
    },
    {
      id: 18,
      sport: 'football',
      coach: {
        name: '杨教练',
        title: '足球战术教练',
        image: '/coach15.png',
        rating: 4.7
      },
      name: '足球团队战术训练',
      description: '学习足球战术原理、位置职责和团队配合，提高比赛意识和团队协作能力。',
      tags: ['战术训练', '6-8人', '120分钟/课时'],
      price: 228
    }
  ]
};

// 获取当前选中分类的课程
const currentCourses = ref<Course[]>(courseData.all);

// 监听tab切换，更新课程数据
watch(() => activeTab.value, (newTab) => {
  currentCourses.value = courseData[newTab] || courseData.all;
}, { immediate: true });

// 处理课程报名
  const handleEnroll = (course: Course) => {
    console.log(`报名课程: ${course.name}`);
  };
  
// 定义类型接口以避免TypeScript错误
interface Activity {
  name: string;
  participants: string;
  price: string;
}

interface PlanningStep {
  number: number;
  title: string;
  description: string;
}

// 处理预约活动策划
  const handleBookEventPlanning = () => {
    // 这里可以添加预约逻辑，比如打开预约表单或者跳转到预约页面
    console.log('预约活动策划');
    // 简单的提示
    alert(t('enterprise.planningProcess.bookingSuccess'));
  };

// 定义响应式数据并添加正确的类型注解
// 使用类型断言确保TypeScript正确识别数据类型
const popularActivities = ref<Activity[]>(t('enterprise.popularActivities.activities', { returnObject: true }) as unknown as Activity[]);
const planningSteps = ref<PlanningStep[]>(t('enterprise.planningProcess.steps', { returnObject: true }) as unknown as PlanningStep[]);

</script>

<template>
  <BaseLayout>
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="slogan">{{ t('home.hero.title') }}</h1>
          <p class="subtitle">{{ t('home.hero.subtitle') }}</p>
          <div class="action-buttons">
          <button class="primary-button" @click="handleBooking">{{ t('home.hero.buttonText') }}</button>
          <button class="secondary-button" @click="handleLearnMore">{{ t('common.more') }}</button>
        </div>
      </div>
    </section>
    
    <!-- 数据指标方块 -->
    <section class="stats-section">
      <div class="stats-container">
        <div class="stat-item">
          <div class="stat-number">100+</div>
          <div class="stat-label">合作场地</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">500+</div>
          <div class="stat-label">专业教练</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">10K+</div>
          <div class="stat-label">活跃用户</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">98%</div>
          <div class="stat-label">用户好评</div>
        </div>
      </div>
    </section>
    
    <!-- 场地预订模块 -->
    <section class="booking-section">
      <div class="booking-content">
        <!-- 标题头 -->
        <div class="booking-header">
            <h2 class="booking-title">{{ t('home.booking.title') }}</h2>
            <p class="booking-subtitle">{{ t('home.booking.subtitle') }}</p>
          </div>
        
        <!-- 搜索功能区域 -->
        <div class="search-section">
          <div class="search-filters">
            <div class="filter-group">
              <label for="field-type">场地类型</label>
              <select id="field-type" class="search-select">
                <option value="">全部类型</option>
                <option value="basketball">篮球场</option>
                <option value="badminton">羽毛球场</option>
                <option value="tennis">网球场</option>
                <option value="football">足球场</option>
              </select>
            </div>
            
            <div class="filter-group">
              <label for="location">区域</label>
              <select id="location" class="search-select">
                <option value="">全部区域</option>
                <option value="east">东区</option>
                <option value="west">西区</option>
                <option value="south">南区</option>
                <option value="north">北区</option>
              </select>
            </div>
            
            <div class="filter-group">
              <label for="booking-date">日期</label>
              <input type="date" id="booking-date" class="search-input">
            </div>
            
            <div class="filter-group">
              <label for="booking-time">时间</label>
              <select id="booking-time" class="search-select">
                <option value="">全部时间</option>
                <option value="morning">上午 (08:00-12:00)</option>
                <option value="afternoon">下午 (12:00-18:00)</option>
                <option value="evening">晚上 (18:00-22:00)</option>
              </select>
            </div>
            
            <div class="filter-group search-button-container">
              <button class="search-button">搜索场地</button>
            </div>
          </div>
        </div>
        
        <!-- 场地预订展示区域 -->
        <div class="fields-section">
          <div class="fields-grid">
            <!-- 篮球场 -->
            <div class="field-card">
              <div class="field-image">
                <img src="/sport-logo.png" alt="篮球场" class="field-img">
              </div>
              <div class="field-info">
                <h3 class="field-title">{{ t('home.booking.basketball') }}</h3>
                <p class="field-description">标准篮球场，配备专业篮球架和防滑地板，适合5v5全场或3v3半场比赛。</p>
                <div class="field-details">
                  <span class="detail-item">室内/室外</span>
                  <span class="detail-item">¥120/小时起</span>
                  <span class="detail-item">可容纳10人</span>
                </div>
                <button class="book-now-button">{{ t('home.booking.bookNow') }}</button>
              </div>
            </div>
            
            <!-- 羽毛球场 -->
            <div class="field-card">
              <div class="field-image">
                <img src="/sport-logo.png" alt="羽毛球场" class="field-img">
              </div>
              <div class="field-info">
                <h3 class="field-title">{{ t('home.booking.badminton') }}</h3>
                <p class="field-description">专业羽毛球场，配备国际标准球网和灯光系统，提供舒适的运动体验。</p>
                <div class="field-details">
                  <span class="detail-item">室内</span>
                  <span class="detail-item">¥80/小时起</span>
                  <span class="detail-item">可容纳4人</span>
                </div>
                <button class="book-now-button">立即预订</button>
              </div>
            </div>
            
            <!-- 网球场 -->
            <div class="field-card">
              <div class="field-image">
                <img src="/sport-logo.png" alt="网球场" class="field-img">
              </div>
              <div class="field-info">
                <h3 class="field-title">{{ t('home.booking.tennis') }}</h3>
                <p class="field-description">高品质网球场，配备专业照明设备和围网，适合网球爱好者训练和比赛。</p>
                <div class="field-details">
                  <span class="detail-item">室内/室外</span>
                  <span class="detail-item">¥150/小时起</span>
                  <span class="detail-item">可容纳4人</span>
                </div>
                <button class="book-now-button">立即预订</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 专业课程教学模块 -->
    <section class="courses-section">
      <div class="courses-content">
        <!-- 标题头 -->
        <div class="courses-header">
          <h2 class="courses-title">{{ t('home.courses.title') }}</h2>
          <p class="courses-subtitle">{{ t('home.courses.subtitle') }}</p>
        </div>
        
        <!-- 课程tab切换 -->
        <div class="courses-tabs">
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'all' }"
            @click="handleTabClick('all')"
          >
            {{ t('home.courses.title') }}
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'basketball' }"
            @click="handleTabClick('basketball')"
          >
            {{ t('home.courses.basketball') }}{{ t('home.courses.title') }}
          </div>
          <div 
              class="tab-item" 
              :class="{ active: activeTab === 'badminton' }"
              @click="handleTabClick('badminton')"
            >
              {{ t('home.courses.badminton') }}{{ t('home.courses.title') }}
            </div>
            <div 
              class="tab-item" 
              :class="{ active: activeTab === 'tennis' }"
              @click="handleTabClick('tennis')"
            >
              {{ t('home.courses.tennis') }}{{ t('home.courses.title') }}
            </div>
            <div 
              class="tab-item" 
              :class="{ active: activeTab === 'billiards' }"
              @click="handleTabClick('billiards')"
            >
              {{ t('home.courses.billiards') }}{{ t('home.courses.title') }}
            </div>
            <div 
              class="tab-item" 
              :class="{ active: activeTab === 'football' }"
              @click="handleTabClick('football')"
            >
              {{ t('home.courses.football') }}{{ t('home.courses.title') }}
            </div>
        </div>
        
        <!-- 教练课程展示区域 - 动态渲染 -->
        <div class="courses-display">
          <div 
            v-for="course in currentCourses" 
            :key="course.id" 
            class="course-card"
          >
            <div class="coach-info">
              <div class="coach-image">
                <img class="coach-img" :src="course.coach.image" :alt="course.coach.name">
              </div>
              <div class="coach-details">
                <h3>{{ course.coach.name }}</h3>
                <p class="coach-title">{{ course.coach.title }}</p>
                <div class="coach-rating">
                  <span class="rating-stars">★★★★★</span>
                  <span class="rating-score">{{ course.coach.rating }}</span>
                </div>
              </div>
            </div>
            <div class="course-content">
              <h4 class="course-name">{{ course.name }}</h4>
              <p class="course-description">{{ course.description }}</p>
              <div class="course-details">
                <span 
                  v-for="(tag, index) in course.tags" 
                  :key="index" 
                  class="detail-tag"
                >
                  {{ tag }}
                </span>
              </div>
            </div>
            <div class="course-price">
              <span class="price">¥{{ course.price }}</span>
              <span class="price-unit">/课时</span>
            </div>
            <button 
              class="enroll-button" 
              @click="handleEnroll(course)"
            >
              {{ t('home.courses.enrollNow') }}
            </button>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 企业趣味运动活动模块 -->
    <section class="enterprise-section">
      <div class="enterprise-content">
        <!-- 模块标题 -->
        <div class="courses-header">
          <h2 class="courses-title">{{ t('enterprise.title') }}</h2>
          <p class="courses-subtitle">{{ t('enterprise.subtitle') }}</p>
        </div>

        <!-- 一行两列布局 - 使用与课程展示相同的网格布局 -->
        <div class="courses-display">
          <!-- 第一列：热门活动 -->
          <div class="course-card">
            <div class="course-content">
              <h3 class="courses-title">{{ t('enterprise.popularActivities.title') }}</h3>
              <p class="course-description">{{ t('enterprise.popularActivities.description') }}</p>
              
              <!-- 活动列表 -->
              <div class="activity-list">
                <div v-for="(activity, index) in popularActivities" 
                     :key="index" 
                     class="activity-item">
                  <h4 class="activity-name">{{ activity.name }}</h4>
                  <div class="course-details">
                    <span class="detail-tag">{{ t('enterprise.popularActivities.participants') }}{{ activity.participants }}</span>
                    <span class="detail-tag">{{ t('enterprise.popularActivities.price') }}{{ activity.price }}{{ t('enterprise.popularActivities.unit') }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 第二列：活动策划流程 -->
          <div class="course-card">
            <div class="course-content">
              <h3 class="courses-title">{{ t('enterprise.planningProcess.title') }}</h3>
              
              <!-- 流程步骤 -->
              <div class="process-steps">
                <div v-for="(step, index) in planningSteps" 
                     :key="index" 
                     class="process-step">
                  <div class="step-number">{{ step.number }}</div>
                  <div class="step-content">
                    <h4 class="step-title">{{ step.title }}</h4>
                    <p class="course-description">{{ step.description }}</p>
                  </div>
                </div>
              </div>

              <!-- 预约按钮 - 使用与报名按钮相同的样式 -->
              <button class="enroll-button" @click="handleBookEventPlanning">{{ t('enterprise.planningProcess.bookButton') }}</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </BaseLayout>
</template>

<style scoped>
/* 英雄区域样式 */
.hero-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3498db, #2c3e50);
  color: white;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/sport-logo.png') no-repeat center center;
  background-size: 200px 200px;
  opacity: 0.1;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
  max-width: 800px;
}

/* 广告语样式 */
.slogan {
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 2rem;
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 按钮容器样式 */
.action-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* 主按钮样式 */
.primary-button {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.primary-button:hover {
  background: #c0392b;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);
}

.primary-button:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}

/* 次要按钮样式 */
.secondary-button {
  background: transparent;
  color: white;
  border: 2px solid white;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.secondary-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.secondary-button:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

/* 数据指标方块样式 */
.stats-section {
  padding: 40px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 20px 0;
  border-radius: 12px;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.stat-item {
  background: rgba(255, 255, 255, 0.95);
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: #4a5568;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 1rem;
  color: #718096;
  font-weight: 500;
}

/* 场地预订模块样式 */
  .booking-section {
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 1rem;
    margin: 2rem 0;
  }

  .booking-header {
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .booking-header h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1rem;
    font-weight: 700;
  }

  .booking-header p {
    font-size: 1.1rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
  }

  .search-section {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 2.5rem;
  }

  .search-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .filter-group {
    display: flex;
    flex-direction: column;
  }

  .filter-group label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
  }

  .filter-group select,
  .filter-group input {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.3s ease;
  }

  .filter-group select:focus,
  .filter-group input:focus {
    outline: none;
    border-color: #4a90e2;
  }

  .search-button-container {
    display: flex;
    justify-content: center;
  }

  .search-button {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 200px;
  }

  .search-button:hover {
    background: linear-gradient(135deg, #357abd 0%, #2c6aa4 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
  }

  /* 趣味活动模块的流程步骤样式 */
  .process-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
  }
  
  .step-number {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 1rem;
    flex-shrink: 0;
  }
  
  .step-content {
    flex-grow: 1;
  }
  
  .step-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
  }
  
  /* 场地卡片样式 */
  .fields-section {
    margin-top: 30px;
  }

  .fields-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .field-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
  }

  .field-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }

  .field-image {
    height: 200px;
    overflow: hidden;
    background: #f1f5f9;
  }

  .field-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .field-card:hover .field-img {
    transform: scale(1.05);
  }

  .field-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .field-title {
    font-size: 1.4rem;
    color: #2d3748;
    margin-bottom: 10px;
    font-weight: 600;
  }

  .field-description {
    color: #718096;
    margin-bottom: 15px;
    line-height: 1.5;
    flex-grow: 1;
  }

  .field-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
  }

  .detail-item {
    background: #e8f0fe;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #4a90e2;
    font-weight: 500;
  }

  .book-now-button {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
  }

  .book-now-button:hover {
    background: linear-gradient(135deg, #357abd 0%, #2c6aa4 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
  }

  /* 专业课程教学模块样式 */
  .courses-section,
  .enterprise-section {
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
    border-radius: 1rem;
    margin: 2rem 0;
  }

  .courses-header {
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .courses-header h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1rem;
    font-weight: 700;
  }

  .courses-header p {
    font-size: 1.1rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
    font-style: italic;
  }

  .courses-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
    background: white;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .tab-item {
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    background: #f8f9fa;
    color: #666;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
  }

  .tab-item:hover {
    background: #e9ecef;
    color: #4a90e2;
  }

  .tab-item.active {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    border-color: #4a90e2;
  }

  .courses-display {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .course-card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .coach-info {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
  }

  .coach-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 1rem;
    border: 3px solid #f0f0f0;
  }

  .coach-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .coach-details h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
  }

  .coach-title {
    margin: 0.25rem 0 0.5rem 0;
    color: #666;
    font-size: 0.9rem;
  }

  .coach-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .rating-stars {
    color: #f39c12;
    font-size: 0.9rem;
  }

  .rating-score {
    font-weight: 700;
    color: #333;
  }

  .course-content {
    flex: 1;
  }

  .course-name {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.3rem;
    color: #333;
  }

  .course-description {
    color: #666;
    margin-bottom: 1.25rem;
    line-height: 1.6;
    font-size: 0.95rem;
  }

  .course-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .detail-tag {
    background: #e8f0fe;
    color: #4a90e2;
    padding: 0.35rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
  }

  .course-price {
    margin-bottom: 1.5rem;
  }

  .course-price .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e74c3c;
  }

  .price-unit {
    color: #666;
    font-size: 1rem;
  }

  .enroll-button {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border: none;
    padding: 0.85rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    font-size: 1rem;
  }

  .enroll-button:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
  }

  /* 响应式设计 */
  @media (max-width: 1024px) {
    .fields-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .courses-display {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .booking-header h2,
    .courses-header h2 {
      font-size: 2.2rem;
    }
  }

  @media (max-width: 768px) {
    .slogan {
      font-size: 2.5rem;
    }
    
    .action-buttons {
      flex-direction: column;
      align-items: center;
    }
    
    .primary-button,
    .secondary-button {
      width: 100%;
      max-width: 300px;
    }
    
    .stats-container {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-number {
      font-size: 2rem;
    }
    
    .stats-section {
      padding: 3rem 1.5rem;
    }
    
    .booking-header h2,
    .courses-header h2 {
      font-size: 2rem;
    }
    
    .search-filters {
      grid-template-columns: 1fr;
    }
    
    .fields-grid,
    .courses-display {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    
    .field-image {
      height: 180px;
    }
    
    .courses-tabs {
      gap: 0.5rem;
    }
    
    .tab-item {
      padding: 0.65rem 1.25rem;
      font-size: 0.9rem;
    }
  }

  @media (max-width: 480px) {
    .slogan {
      font-size: 2rem;
    }
    
    .hero-section {
      min-height: 70vh;
    }
    
    .stats-container {
      grid-template-columns: 1fr;
    }
    
    .stat-number {
      font-size: 1.8rem;
    }
    
    .stats-section {
      padding: 30px 15px;
    }
    
    .booking-section, .courses-section, .enterprise-section {
      padding: 2rem 1rem;
    }

    /* 企业趣味运动活动模块样式 */
    .enterprise-section {
      background: #f9f9f9;
      padding: 4rem 1rem;
    }

    .enterprise-header {
      text-align: center;
      margin-bottom: 2.5rem;
    }

    .section-title {
      font-size: 2.5rem;
      color: #2c3e50;
      margin-bottom: 1rem;
      font-weight: 700;
    }

    .section-subtitle {
      font-size: 1.1rem;
      color: #666;
      max-width: 700px;
      margin: 0 auto;
    }

    .enterprise-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-top: 2rem;
    }

    /* 热门活动样式 */
    .popular-activities {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    .activity-title {
      font-size: 1.8rem;
      color: #333;
      margin-bottom: 1rem;
      border-bottom: 3px solid #e74c3c;
      padding-bottom: 0.5rem;
      display: inline-block;
    }

    .activity-description {
      color: #666;
      margin-bottom: 1.5rem;
      line-height: 1.6;
    }

    .activity-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .activity-item {
      padding: 1.2rem;
      background: #f8f9fa;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .activity-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .activity-name {
      font-size: 1.2rem;
      color: #2c3e50;
      margin-bottom: 0.8rem;
      font-weight: 600;
    }

    .activity-details {
      display: flex;
      justify-content: space-between;
      font-size: 0.95rem;
    }

    .participants {
      color: #3498db;
      font-weight: 500;
    }

    .price {
      color: #e74c3c;
      font-weight: 600;
    }

    /* 活动策划流程样式 */
    .planning-process {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    .process-title {
      font-size: 1.8rem;
      color: #333;
      margin-bottom: 1.5rem;
      border-bottom: 3px solid #27ae60;
      padding-bottom: 0.5rem;
      display: inline-block;
    }

    .process-steps {
      margin-bottom: 2rem;
    }

    .process-step {
      display: flex;
      align-items: flex-start;
      margin-bottom: 1.5rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid #eee;
    }

    .process-step:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .step-number {
      background: #27ae60;
      color: white;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      margin-right: 1rem;
      flex-shrink: 0;
    }

    .step-content {
      flex: 1;
    }

    .step-title {
      font-size: 1.1rem;
      color: #2c3e50;
      margin-bottom: 0.5rem;
      font-weight: 600;
    }

    .step-description {
      color: #666;
      font-size: 0.95rem;
      line-height: 1.5;
    }

    /* 预约按钮样式 */
    .book-button {
      width: 100%;
      padding: 1rem 2rem;
      background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 1.1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 1.5rem;
    }

    .book-button:hover {
      background: linear-gradient(135deg, #2980b9 0%, #1f6da8 100%);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }

    /* 响应式设计 */
    @media (max-width: 1024px) {
      .section-title {
        font-size: 2.2rem;
      }
    }

    @media (max-width: 768px) {
      .enterprise-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .section-title {
        font-size: 2rem;
      }

      .activity-title, .process-title {
        font-size: 1.5rem;
      }

      .popular-activities, .planning-process {
        padding: 1.5rem;
      }
    }

    @media (max-width: 480px) {
      .enterprise-section {
        padding: 3rem 1rem;
      }

      .section-title {
        font-size: 1.8rem;
      }

      .section-subtitle {
        font-size: 1rem;
      }

      .popular-activities, .planning-process {
        padding: 1.2rem;
      }

      .activity-name {
        font-size: 1.1rem;
      }
    }
    
    .booking-header h2,
    .courses-header h2 {
      font-size: 1.8rem;
    }
    
    .booking-header p {
      font-size: 1rem;
    }
    
    .search-section {
      padding: 1.5rem;
    }
    
    .field-image {
      height: 160px;
    }
    
    .field-info {
      padding: 15px;
    }
    
    .coach-info {
      flex-direction: column;
      text-align: center;
    }
    
    .coach-image {
      margin-right: 0;
      margin-bottom: 1rem;
    }
  }
</style>
